<template>
  <el-drawer
    title="以图查房"
    :visible.sync="visible"
    :before-close="handleClose"
    direction="rtl"
    size="70%"
    :append-to-body="true"
  >
    <div class="drawer-content">
      <div class="map-container">
        <iframe
          width="100%"
          height="100%"
          id="mapBox"
          :src="
            mapUrl ||
            'https://tdmap.omniview.pro:9997/getMapObjId/index.html?view_layer=3'
          "
          @load="onIframeLoad"
          style="border: none"
        ></iframe>
        <div v-show="!mapLoaded" class="map-loading">
          <div class="loading-content">
            <i class="el-icon-loading"></i>
            <p>地图加载中...</p>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {
  getURLWithToken, // 获取地图token
} from "@/api/manage/asset";

export default {
  name: "ImageSearchDrawer",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      mapToken: "", // 地图鉴权 token
      mapUrl: "",
      messageListenerAdded: false, // 标记消息监听器是否已添加
      mapLoaded: false, // 标记地图是否已加载并鉴权完成
    };
  },
  created() {
    this.fetchMapUrl();
  },
  watch: {
    show(newVal) {
      this.visible = newVal;
      if (newVal) {
        // 抽屉打开时初始化地图
        this.$nextTick(() => {
          this.initMap();
        });
      }
    },
    visible(newVal) {
      if (!newVal) {
        this.$emit("close");
      }
    },
  },
  mounted() {
    this.initMap();
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听器
    if (this.messageListenerAdded) {
      window.removeEventListener("message", this.handleMessage);
    }
  },
  methods: {
    handleClose() {
      this.visible = false;
      this.$emit("close");
    },
    // 获取地图 URL 和 Token
    fetchMapUrl() {
      const data = {
        busMark: "{'test':'abc'}",
        region: null,
        street: null,
      };
      getURLWithToken(data).then((res) => {
        console.log(res, "获取地图URL和Token");
        if (res.errorCode === "000000" && res.data) {
          // 处理返回的数据，格式为 "@https://...?token=..."
          let urlString = res.data;

          // 移除开头的 @ 符号（如果存在）
          if (urlString.startsWith("@")) {
            urlString = urlString.substring(1);
          }

          // 提取 ? 前面的 URL
          const urlIndex = urlString.indexOf("?");
          if (urlIndex !== -1) {
            this.mapUrl = urlString.substring(0, urlIndex);

            // 提取 token= 后面的 token
            const tokenMatch = urlString.match(/token=([^&]*)/);
            if (tokenMatch && tokenMatch[1]) {
              this.mapToken = tokenMatch[1];
              console.log("mapUrl:", this.mapUrl);
              console.log("mapToken:", this.mapToken);
            }
          } else {
            // 如果没有 ?，整个字符串作为 URL
            this.mapUrl = urlString;
          }

          // 在 mapUrl 后面拼接 &view_layer=3
          if (this.mapUrl) {
            // 判断 mapUrl 是否已经包含参数
            if (this.mapUrl.indexOf("?") !== -1) {
              this.mapUrl += "&view_layer=3";
            } else {
              this.mapUrl += "?view_layer=3";
            }
          }
        }
      });
    },
    // 初始化地图
    initMap() {
      // 如果还没有获取到 token，使用默认 token
      if (!this.mapToken) {
        var maptoken =
          "eyJhbGciOiJIUzI1NiIsIlR5cGUiOiJKd3QiLCJ0eXAiOiJKV1QifQ.eyJsb2dpblRpbWUiOiIyMDI1LTExLTA3IDExOjA5OjQxIiwibG9naW5OYW1lIjoiMDBFRTcyQTlFQTlEODZFMkU1NTBCOENFMkZBMzMxNjQiLCJleHAiOjE3NjI0OTIxODF9.GWX57IF73XkEPvKOb3e1Mn1G4eLxS0dEbLmYrd6kgHg";
        this.mapToken = maptoken;
      }

      // 确保事件监听器只添加一次
      if (this.messageListenerAdded) {
        return;
      }
      this.messageListenerAdded = true;

      window.addEventListener("message", this.handleMessage, false);
    },
    // 处理地图消息
    handleMessage(e) {
      console.log(e, "22222");

      var data;
      try {
        data = e.data;
        // data = JSON.parse(e.data);
      } catch (err) {
        data = e.data;
        console.log(err, "errrrrrrrrrr");
      }
      switch (data.method) {
        case "addPointReturn": {
          console.log(data);
          //  获取data返回X,Y信息 作为调用doBatchAddMP写入参数用
          break;
        }
        case "mapOnload": {
          //地图加载完成事件 所有接口必须等待地图加载完成才能调用
          // 地图完全加载完成后，显示iframe
          console.log("地图加载完成，显示地图");
          this.mapLoaded = true;
          break;
        }
        case "selectEventReturn": {
          console.log("selectEventReturnaaaaaaaaa", data);
          console.log("data.data", data.data.xqm);
          if (data.data.xqm.length === 0) {
            this.$modal.msgWarning("未选择小区！");
          } else if (data.data.xqm.length > 1) {
            console.log("只能选择一个小区，请重新选择！");

            this.$modal.msgWarning("只能选择一个小区，请重新选择！");
          } else {
            console.log("data.data.xqm[0]", data.data.xqm[0]);
            // 获取小区名
            const sectName = data.data.xqm[0].sect_name_;
            if (sectName) {
              // 向父组件传递选中的小区名
              this.$emit("selectSect", sectName);
            }
          }
          //点选或框选图层返回图层详细信息
          break;
        }
        case "confirmMapReturn": {
          console.log("confirmMapReturn", data);
          //保存成功失败返回结果集
          break;
        }
        case "doGetAttributeByBusmarkReturn": {
          console.log("doGetAttributeByBusmarkReturn", data);
          //doGetAttributeByBusmark接口的返回参数
          break;
        }
      }
    },
    // iframe 加载完成事件，进行鉴权
    onIframeLoad() {
      console.log("iframe 加载完成，开始鉴权");
      if (this.mapToken) {
        setTimeout(() => {
          this.postToIframeMethed("validauthorize", [this.mapToken]);
          // 鉴权后，如果 mapOnload 事件没有触发，延迟显示地图（备用方案）
          setTimeout(() => {
            if (!this.mapLoaded) {
              console.log("使用备用方案显示地图");
              this.mapLoaded = true;
            }
          }, 2000); // 延迟 2 秒显示，确保鉴权完成
        }, 500); // 延迟 500ms 确保 iframe 完全就绪
      }
    },
    // 测试iframe地图
    postToIframeMethed(methedName, data, backFun) {
      var win = document.getElementById("mapBox").contentWindow; //根据id获取iframe
      win.postMessage(
        JSON.stringify({ method: methedName, data: data, backfun: backFun }),
        "*",
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-content {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
}

.map-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-content {
  text-align: center;
  color: #666;
}

.loading-content i {
  font-size: 32px;
  color: #409eff;
  margin-bottom: 10px;
  display: block;
}

.loading-content p {
  margin: 0;
  font-size: 14px;
}
</style>
